<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/bootstrap-4.5.0-dist/css/bootstrap.css">
<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:400px;
}

</style>
</head>
<body>
	<div class="container">
		
		<ul class="list-unstyled">
			<c:forEach items="${info.list}" var="article">
				<li class="media">
					<!-- 文章标题图片 -->
					<div class="col-md-2">
						<img src="${article.picture}" height="70px" width="70px">
					</div>
					
					<!-- 文章名称 -->
					<div class="col-md-10">		
						<span ><h5><b>${article.title }</b></h5></span>
						${article.displayTime }
						<button type="button" onclick="detail(${article.id})" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >详情</button>
					</div>	
				</li>
				<hr>
			</c:forEach>
		</ul>		
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/commons/pages.jsp"></jsp:include>		
	</div>	
	
	<!-- 文章详情的模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="content">
	       		
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>		
</body>
<script type="text/javascript">
	//查询文章详情
	function detail(id){
		$.post("/my/detail",{id:id},function(article){
			//展示数据
			$("#exampleModalLabel").html(article.title);
			$("#content").html(article.content);
		})
	}
	//分页
	function goPage(pageNum){
		//整合个人中心
		$("#center").load("/my/articles?pageNum="+pageNum)
		
		//location="/my/articles?pageNum="+pageNum;
	}

</script>
</html>
